<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>账单消耗统计详情</title>
    <th:block th:include="include :: header('bootstrap')" />
    <script type="text/javascript" th:src="@{/static/js/My97DatePicker/WdatePicker.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/My97DatePicker/lang/zh-cn.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/jquery/jquery-1.10.2.min.js}"></script>
</head>
<body class="container">

<div class="with:80%">
    <!-- TODO 回显查询数据-->
    <form class="form-inline" action="" id="detail" method="get">

        <div class="form-group">
            <label class="control-label">类型</label>&nbsp;
            <select th:name="type" class="form-control">
                <option value="0">全部</option>
                <option th:each="item:${typeList}" 
                        th:value="${item.typeId}"   
                        th:text="${item.typeName}" 
                        th:selected="${item.typeId}+''== ${#strings.trim(detailParamVo.type)}"></option>
            </select>&nbsp;
        </div>
        <div class="form-group">
            <label for="date1" class="control-label">开始时间</label>&nbsp;
            <input type="text" class="form-control" name="startTime" id="date1" placeholder="开始时间" th:value="${detailParamVo.startTime}" 
                   onclick="WdatePicker()"/>&nbsp;
        </div>
        <div class="form-group">
            <label for="date2" class="control-label">结束时间</label>&nbsp;
            <input type="text" class="form-control" name="endTime" id="date2" placeholder="结束时间" th:value="${detailParamVo.endTime}" 
                   onclick="WdatePicker()"/>&nbsp;
        </div>
        <div class="form-group">
            <input type="submit" value="查询" class="btn btn-info"/>
            &nbsp; &nbsp;
            <button id="reset" class="btn btn-info">重置</button>
            &nbsp; &nbsp;
        </div>

        <div class="form-group">
            <label class="control-label">支出 </label>&nbsp;
            <input style="height: 30px; width: 70px; line-height: 29px;text-align: center; color: red;font-weight: bold;"
                   maxlength="100" readonly th:name="outMoney" th:value="${detailVo.getConsumeCollectVo().outMoney}"/>
            &nbsp; &nbsp;&nbsp;
        </div>
        <div class="form-group">
            <label class="control-label">收入</label>&nbsp;
            <input style="height: 30px; width: 70px; line-height: 29px;text-align: center; color: green;font-weight: bold;"
                   maxlength="100" readonly th:name="inMoney" th:value="${detailVo.getConsumeCollectVo().inMoney}"/>
        </div>
        <input type="hidden" th:name="token" th:if="${detailParamVo.token!=null}" th:value="${detailParamVo.token}"/>
    </form>
</div>
<br/>
<div>
    <button id="index"  onclick="index()" class="btn btn-info">返回首页</button>

    用户为:<input type="text" readonly th:value="${detailParamVo.customerId}" class="btn btn-info"/>

    账号是:<input type="text" readonly th:value="${userName}" class="btn btn-info"/>
</div>
<br/>
<div class="with:80%">

    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th style="text-align: center">类型ID</th>
            <th style="text-align: center">类型名称</th>
            <th style="text-align: center">金额</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="consumeDetailVo : ${detailVo.getConsumeDetailVos()}">
            <td style="text-align: center" th:text="${consumeDetailVo.typeId}"></td>
            <td style="text-align: center" th:text="${consumeDetailVo.typeName}"></td>
            <td th:if="${consumeDetailVo.typeId} != 25" style="text-align: center" th:text="${consumeDetailVo.money}"></td>
            <td th:if="${consumeDetailVo.typeId} == 25" style="text-align: center" th:text="'**'"></td>
        </tr>
        </tbody>
        
    </table>
</div>

</body>
<script type="text/javascript">
    $("#reset").click(function(){
        $(".form-inline input").each(function(){
            $(this).val('');
        });
        $(".form-inline select").each(function(){
            $(this).val('');
        });
    })

    function index(){
        location.href="/bill/to/index";
    }
</script>
</html>
